<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>09_自定义滚动条-滚轮事件基础</title>
    </head>
    <body>

        <script>
            function cheng(event){
                //  ie/chrome 
                // 上  正的120   120
                // 下  负的120   -120
                // console.log(event.wheelDelta);


                // firefox
                // 上  负的3     -3
                // 下  正的3     3
                // console.log(event.detail);

                // 在狐火浏览器中  event.wheelDelta的值是undefined
                // console.log(event.wheelDelta);


                // ie/chrome 
                if(event.wheelDelta){
                    if(event.wheelDelta > 0){
                        console.log('向上');
                    }else {
                        console.log('向下');
                    }

                }else if(event.detail){
                    // firefox
                    if(event.detail < 0){
                        console.log('向上');
                    }else{
                        console.log('向下');
                    }
                }
            }


            // ie/chrome 
            document.addEventListener('mousewheel',cheng);

            // firefox
            document.addEventListener('DOMMouseScroll',cheng)

        </script>
    </body>
</html>